<template>
  <div class="Uploads">
    <el-upload
      ref="uploadRef"
      :class="{ hide: hideUpload }"
      v-model:file-list="fileList"
      :action="action"
      :auto-upload="false"
      :show-file-list="listType === 'picture-card'"
      multiple
      :on-change="onChange"
      :on-remove="onRemove"
      :before-remove="beforeRemove"
      :on-preview="onPreview"
      :list-type="listType"
      :limit="limit"
    >
      <el-button
        type="primary"
        v-if="['text', 'picture'].includes(listType)"
      >
        {{ t('Uploads.t1') }}
      </el-button>
      <el-icon v-if="listType === 'picture-card'"><Plus /></el-icon>
      <slot> </slot>

      <template #tip>
        <div class="el-upload__tip">{{ tip }}</div>
      </template>
    </el-upload>

    <div v-if="listType !== 'picture-card' && fileList.length" class="file-list mt-1">
      <div
        class="item flexsc"
        v-for="(item, index) in fileList"
        :key="index"
      >
        <div
          class="name mr-2 flexsc"
          @click="onPreview(item)"
        >
          <el-icon class="mr-1"><FolderRemove /></el-icon> {{ item.name }}
        </div>
        <div class="icon flexcc">
          <el-popconfirm
            :title="`${t('Uploads.t4')}${item.name} ?`"
            width="300"
            @confirm="handleDel(item, index)"
          >
            <template #reference>
              <el-icon><CloseBold /></el-icon>
            </template>
          </el-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useLogin from '@/stores/login.js'

const { t, locale } = useI18n()
const store = useLogin()

const router = useRouter()
const route = useRoute()

const emit = defineEmits(['change'])
const props = defineProps({
  listType: {
    type: String,
    default: 'text' // 'text' | 'picture' | 'picture-card'
  },
  limit: {
    type: Number
  },
  tip: {
    type: String,
    default: ''
  },
  readonly: {
    type: Boolean,
    default: false
  }
})

// 接口地址
const action = ref(``)

// 文件列表
const fileList = ref([])
const setFileList = (val) => {
  fileList.value = val
}

// ref
const uploadRef = ref(null)

// 隐藏按钮
const hideUpload = computed(() => {
  return fileList.value.length >= props.limit || props.readonly
})

// 文件状态改变时的钩子
const onChange = (uploadFile, uploadFiles) => {
  console.log('onChange', uploadFile, uploadFiles)

  if (uploadFile.size / 1024 / 1024 > 50) {
    ElMessage.warning(t('Uploads.t3'))
    fileList.value.splice(fileList.value.length - 1, 1)
    return
  }

  fileList.value = uploadFiles
  emit('change', uploadFiles)
}

// 文件列表移除文件时的钩子
const onRemove = (file, uploadFiles) => {
  // console.log(file, uploadFiles)
}
// 删除文件之前的钩子
const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`${t('Uploads.t4')}${uploadFile.name}'?`).then(
    () => true,
    () => false
  )
}

// 点击文件列表中已上传的文件时的钩子
const onPreview = (uploadFile) => {
  // console.log(uploadFile, '--')
  const { url, raw } = uploadFile

  const link = document.createElement('a')
  link.href = uploadFile.url || URL.createObjectURL(raw)
  link.target = '_blank'
  link.click()
  URL.revokeObjectURL(link.href)
  link.remove()
}

// 删除文件
const handleDel = (item, index) => {
  fileList.value.splice(index, 1)
}

defineExpose({
  setFileList
})
</script>

<style scoped lang="scss">
.Uploads {
  .hide {
    :deep(.el-upload--picture-card) {
      display: none;
    }
  }

  .file-list {
    background: #fff;
    padding: 10px;

    .item {
      padding: 10px;
      &:hover {
        background-color: #f9f9f9;
      }

      .name,
      .icon {
        cursor: pointer;
      }
    }
  }
}
</style>

<style>
.el-popconfirm__main {
  word-break: break-all;
}
</style>
